<template>
  <div id="IndexView">
    <div id="navBar" v-show="moduleStatus.traffic_topnav">
      <ul class="head-nav nav nav-tabs">
        <li id="projectName"><a href="#" value="baotou">分析决策支持系统</a></li>
        <li class="active"><a href="#" value="index" @click="changeChosedModule('traffic_index')">首页</a></li>
        <li><a href="#"  value="condition" @click="changeChosedModule('traffic_condition')">运行态势分析</a></li>
        <li><a href="#" value="analy" @click="changeChosedModule('traffic_analy')">交通安全态势分析</a></li>
        <li><a href="#" value="ext" @click="changeChosedModule('traffic_ext')">指数分析预警</a></li>
        <li><a href="#" value="effect" @click="changeChosedModule('traffic_effect')">交通效能评价</a></li>
        </li>
      </ul>
    </div>
    <div id="func-list">
      <index-map ref="index" v-show="moduleStatus.traffic_index"></index-map>
      <condition-map ref="condition" v-show="moduleStatus.traffic_condition"></condition-map>
      <analy-map ref="analy" v-show="moduleStatus.traffic_analy"></analy-map>
      <exponent-map ref="exponent" v-show="moduleStatus.traffic_ext"></exponent-map>
      <effect-map ref="effect" v-show="moduleStatus.traffic_effect"></effect-map>
    </div>
  </div>
</template>

<script>


  import * as globals from './global'
  import * as env from './global/env'
  import WeatherModule from './components/WeatherModule'
  import ConditionMap from './components/ConditionMap'
  import AnalyMap from './components/analyMap'
  import ExponentMap from './components/ExponentMap'
  import IndexMap from './components/IndexMap'
  import EffectMap from './components/EffectMap'

  import {mapGetters} from 'vuex'

  export default {
    name: 'IndexView',
    data(){
      return {
        moduleStatus: {
          traffic_topnav:true,
          traffic_index:true,
          traffic_condition:false,
          traffic_analy:false,
          traffic_ext:false,
          traffic_effect:false,

        }
      }
    },

    components: {
      IndexMap,
      ConditionMap,
      AnalyMap,
      ExponentMap,
      EffectMap,
    },
    mounted(){

      var that = this;
      $('#navBar ul li').click(function () {
        $(this).siblings().removeClass('active');
        $(this).addClass('active');
        /*that.initTemplate();*/
      })
      console.log('你好');
      this.initTemplate();

    },
    methods: {
      initTemplate(){
        var aa = String(window.document.location.href);
        console.log('链接-----'+aa);
        var path = this.$route.path.substring(1);

        var activeLiDom = null
        var that = this;
        if (!this.isEmptyObject(path)) {
          $("#navBar ul").find("a").each(function (i) {
            if (this.attributes[1].value == path) {
              $(".cennavi").css('bottom','-50px');
              var li = $(this).parent() //查找到的li
              activeLiDom = li
              var module = 'traffic_'+this.attributes[1].value;
              that.changeChosedModule(module,'traffic_topnav');
            }
          })
        }else {
          $("#navBar ul").find("a").each(function (i) {
            if (this.attributes[1].value == "index") {
              var li = $(this).parent() //查找到的li
              activeLiDom = li
            }
          })
        }
        activeLiDom[0].click()
      },
      isEmptyObject(e) {
        var t;
        for (t in e)
          return !1;

        return !0
      },
      changeChosedModule(module,topnav){

        var moduleName = `${module}`;
        if(topnav){
          this.moduleStatus[topnav] = false
        }
        for(var key in this.moduleStatus){
          if(key == moduleName){
            this.moduleStatus[key] = true
          }else{
            if(key != 'traffic_topnav'){
              this.moduleStatus[key] = false
            }

          }
        }
        if(moduleName == 'traffic_analy'){
          this.$refs.analy.resizeMap(topnav);
          this.$refs.analy.initMap();
        }else if(moduleName == 'traffic_condition'){
          this.$refs.condition.resizeMap(topnav);

        }else if(moduleName == 'traffic_ext'){
          this.$refs.exponent.resizeMap(topnav);
    /*      this.$refs.exponent.selectInitYearLine();
          this.$refs.exponent.selectInitMonthLine();*/
          this.$refs.exponent.initExponentMap();
        }




      },
    },

    computed: {
      ...mapGetters({
        weatherMapVisible: "weatherMapVisible",
      }),
    },

    watch: {
//            weatherMapVisible: "displayReagionWeather"
      '$route' (to, from) {
        // 对路由变化作出响应...
        this.initTemplate(to);
      }
    },


  }
</script>

<style scope>
  html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  a {
    color: inherit;
  }

  #IndexView {
    width: 100%;
    height: 100%;
  }

  #func-list {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
  }

  #navBar {
    width: 100%;;
    top: 5px;
    height: 70px;
    flex: 1;
    background-color: #10286a;
  }

  .head-nav {
    font-size: 24px;
    font-family: 华文宋体;
    color: white;
    font-weight: 900;
    /*background-color: #b9cf6a;*/
  }

</style>
